<template>
  <view class="main">
    <view class="popup3">
      <view class="zl-flex zl-m-b-30">
        <view class="line zl-m-r-16"></view>
        <text class="zl-font-32 zl-color-333 zl-font-700">真实姓名</text>
      </view>
      <view class="zl-bg-color-white" style="padding: 30rpx; border-radius: 18rpx">
        <input class="uni-input" v-model="userName" placeholder="请输入您真实的姓名" @input="replaceText" />
      </view>
      <view class="zl-flex zl-m-b-30 zl-m-t-30">
        <view class="line zl-m-r-16"></view>
        <text class="zl-font-32 zl-color-333 zl-font-700">提示词</text>
      </view>
      <view class="tipsDescBox">
        <text>{{ authText }}</text>
        <view class="zl-flex-col zl-col-center" style="position: absolute; right: 30rpx; bottom: 30rpx" @click="$util.copy(this.authText)">
          <image src="/static/aiCreate/icon_wenan_copy.png" style="width: 40rpx; height: 40rpx" mode=""> </image>
          <text class="zl-font-20 zl-color-333 zl-m-t-8">复制文本</text>
        </view>
      </view>
      <view class="zl-flex zl-m-b-30 zl-m-t-30">
        <view class="line zl-m-r-16"></view>
        <text class="zl-font-32 zl-color-333 zl-font-700">授权视频</text>
      </view>
      <view class="imageBox zl-flex zl-row-center zl-m-t-30" v-if="authVideoUrl">
        <image :src="authVideoUrl + OssVideoShrink" mode="aspectFit"></image>
        <image src="/static/icon/play.png" mode="" @click="previewAuthVideo()" style="width: 50rpx; height: 50rpx; position: absolute; top: 50%; left: 50%; transform: translate(-50%)"> </image>
        <image src="/static/new/icon_shuzhiren_error.png" mode="" @click="delAuthVideoUrl" style="position: absolute; right: 0; top: 0; width: 40rpx; height: 40rpx"> </image>
      </view>
      <view class="form_box1" v-else>
        <view class="zl-flex zl-row-around zl-m-b-30">
          <view class="zl-flex-col zl-col-center zl-row-center" style="width: 50%; height: 200rpx" @click="toHistory">
            <image src="/static/new/icon_shuzhiren_02.png" style="width: 50rpx; height: 50rpx" mode=""> </image>
            <text class="zl-color-000 zl-font-28 zl-m-t-20">历史授权视频</text>
          </view>
          <view class="zl-flex-col zl-col-center zl-row-center" style="width: 50%; height: 200rpx">
            <!-- <image src="/static/new/icon_shuzhiren_01.png" style="width: 50rpx;height: 50rpx;" mode="">
						</image>
						<text class="zl-color-000 zl-font-28 zl-m-t-20">上传授权视频</text> -->
            <mediaAuth :list="authList" :max="max" :len="1" :size="100" :isAuth="false" :userName="userName" @success="media_auth_success($event)"> </mediaAuth>
          </view>
        </view>
        <view class="zl-flex-col" style="width: 100%">
          <view class="zl-flex">
            <view class="zl-flex" style="width: 50%">
              <view class="dig zl-m-r-20"></view>
              <text class="zl-color-999 zl-font-20">文件大小：小于100MB</text>
            </view>
            <view class="zl-flex" style="width: 50%">
              <view class="dig zl-m-r-20"></view>
              <text class="zl-color-999 zl-font-20">文件格式: mp4、mov</text>
            </view>
          </view>
          <view class="zl-flex zl-m-t-20">
            <view class="zl-flex">
              <view class="dig zl-m-r-20"></view>
              <text class="zl-color-999 zl-font-20">录制时，请流畅、一字不落的念出提示词中的内容</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="footer zl-flex zl-row-center" style="gap: 20rpx;">
			<view class="btn11 zl-flex zl-row-center zl-col-center" @click="toHistory">
				历史授权视频
			</view>
			<mediaAuth :list="authList" :max="max" :len="1" :size="100" :userName="userName"
				@success="media_auth_success($event)">
			</mediaAuth>
		</view> -->
    <view class="zl-theme-btn btn12" @click="submitAuth"> 提交授权 </view>
    <uni-popup background-color="#fff" ref="pop2" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">预览素材</view>
          <image @click="closeVideo()" style="width: 30rpx" src="/static/icon/pop_close.png" mode="widthFix"> </image>
        </view>
        <view class="popup-video">
          <video :src="activeVideo" :controls="true"></video>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import mediaAuth from '@/components/media_auth.vue'
export default {
  components: {
    mediaAuth
  },
  data() {
    return {
      OssVideoShrink: getApp().globalData.OssVideoShrink,
      ossVideoCover: getApp().globalData.ossVideoCover,

      name: getApp().globalData.oemName,
      authVideoUrl: '',
      userName: '',
      authText: '',
      authMateId: '',
      digitalId: 0,
      activeVideo: ''
    }
  },
  onLoad(opt) {
    this.replaceText()
    this.digitalId = opt.digitalId
    uni.$on('chooseHistoryModelId', (res) => {
      if (res) {
        this.authVideoUrl = res.coverUrl
        this.authMateId = res.mateId
        console.log(res, 'res11')
      }
    })
  },
  onUnload() {
    uni.$off('chooseHistoryModelId')
  },
  methods: {
    delAuthVideoUrl() {
      this.authVideoUrl = ''
      this.authMateId = 0
    },
    submitAuth() {
      if (!this.userName) {
        return this.$util.msg('请填写授权视频真实名称！')
      }
      if (this.authMateId <= 0) {
        return this.$util.msg('请上传授权视频文件！')
      }
      this.api.clone
        .setauthdigital({
          digitalId: this.digitalId,
          authMateId: this.authMateId,
          authText: this.authText
        })
        .then((res) => {
          if (res.code === 0) {
            uni.$emit('reloadList')
            uni.navigateBack()
            this.$util.msg(res.msg)
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    media_auth_success(res) {
      console.log(res)
      if (res) {
        this.authList = res
        if (res[0]) {
          this.authVideoUrl = res[0].url
          this.authMateId = res[0].mateId
        }
      }
    },
    toHistory() {
      if (!this.userName) {
        return this.$util.msg('请先填写姓名！')
      }
      uni.navigateTo({
        url: '/pages/clone/historyAuthList'
      })
    },
    previewAuthVideo(item) {
      this.api.userfile
        .geturl({
          mateId: this.authMateId
        })
        .then((res) => {
          if (res.code === 0) {
            this.activeVideo = res.data.url
            this.$refs.pop2.open()
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    closeVideo() {
      setTimeout(() => {
        this.activeVideo = ''
      }, 250)
      this.$refs.pop2.close()
    },
    replaceText() {
      if (this.userName) {
        this.authText = `我是${this.userName ? this.userName : 'XXX'}，特此声明，同意授权${this.name}，对我的形象进行克隆，用于数字人视频合成。`
      } else if (this.name) {
        this.authText = `我是${this.userName ? this.userName : 'XXX'}，特此声明，同意授权${this.name}，对我的形象进行克隆，用于数字人视频合成。`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.popup3 {
  padding: 30rpx 30rpx 30rpx;
  overflow: auto;
  height: calc(100vh - 160rpx);

  .line {
    width: 8rpx;
    height: 32rpx;
    background: #1e47e1;
    border-radius: 4rpx;
  }

  .footer {
    background: #ffffff;
  }
}

.tipsDescBox {
  padding: 30rpx;
  width: 690rpx;
  height: 307rpx;
  background: #ffffff;
  border-radius: 18rpx;
  position: relative;
}

.btn11 {
  width: 260rpx;
  height: 110rpx;
  background: #ffffff;
  border-radius: 18rpx;
  border: 1rpx solid #000000;
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
}

.btn12 {
  width: 690rpx;
  height: 110rpx;
  border-radius: 18rpx;
  font-weight: 500;
  font-size: 32rpx;
  color: #fff;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imageBox {
  width: 690rpx;
  height: 406rpx;
  background-color: #ffffff;
  border-radius: 18rpx;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.pop-box {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;

  .pop-top {
    height: 120rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid #ddd;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #131415;
  }
}

.popup-video {
}

.popup-video video {
  width: 100%;
  height: 75vh;
}

.form_box1 {
  width: 690rpx;
  margin: 30rpx auto 0;
  padding: 30rpx 30rpx 30rpx;
  background-color: white;
  border-radius: 20rpx;

  .dig {
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background-color: #eaeaea;
  }
}
</style>
